import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'
import style from './style.module.css'
import { Breadcrumb, Space, Button,Popconfirm, message,  Switch, Table } from 'antd';
// import ShopTable from '../../../components/ShopTable'
import ShopSearch from '../../../components/Shopsearch'
import DialogForm from './DialogForm'



const Categories = (props) => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [detailInfo, setDetail] = useState({})
    const [isDisabled,setDisabled]=useState('')
    const [aa,setAA]=useState(true)
    const [checkStrictly, setCheckStrictly] = useState(false);
    const { classifyList} = props
    

    const SearchForm = {  //搜索组件传值
        LevelStatus: {
            title: '状态选择：',
            data: [ 
                {
                value: '全部',
                label: '全部',
              },
              {
                value: '显示',
                label: '显示',
              },{
                value: '隐藏',
                label: '隐藏',
              }
            ],
        },
        selectStatus: [], //单层选择
        search: {
            title: '名称搜索：',
            placeholder: '请输入名称'
        }
    }
    useEffect(() => {
        props.dispatch({
            type: 'get_classify'
        })
    }, [])
    const handleAddClassify = () => {  //添加商品分类
        setAA(true)
        setDetail({})
        setIsModalVisible(true);
    }

    const handleEdmit = (record) => {//编辑显示弹框
        console.log(record)
        setAA(true)
        setDetail({ ...record,diatype:'编辑' })
        setIsModalVisible(true);
    }
    const getCancel = () => {//关闭弹框
        setIsModalVisible(false);
        setAA(false)
    };
    const getConfirm=()=>{//弹框确定
        setIsModalVisible(false);
        setAA(false)
        props.dispatch({
            type: 'get_classify'
        })
        
    }
    const handleSearch = (val) => {//搜索
        // console.log(val,'keyword')
        console.log(isDisabled,'isdisabled')
        props.dispatch({
            type: 'get_classify',
            payload: {
                keyword: val,
                isDisabled
            }
        })
    }
    const selectStatus = (val) => {//选择
        console.log(val[val.length - 1])
        setDisabled(val[val.length - 1])
        props.dispatch({
            type: 'get_classify',
            payload: {
                isDisabled: val[val.length - 1],
            }
        })
    }
    const handleOk = () => {  //编辑确定
        setIsModalVisible(false);
       /*  props.dispatch({
            type: 'edmit_shop',
            payload: { ...detailInfo }
        })
        props.dispatch({
            type: 'get_shop',
            payload: {
                status
            }
        }) */
    };

    const delConfirm=(record)=> {//删除确定
        const { id } = record;
        props.dispatch({
            type: 'delete_classify',
            payload: id
        })
        props.dispatch({
            type: 'get_classify'
        })
      }
      
      const delCancel=(e)=> {//删除取消
        console.log(e);
        message.error('Click on No');
      }
    const handleAddChild = (record) => {//添加子目录
        console.log(record,'record')
        setAA(true)
        const child={
            title:'',
            parentcode:record.code,
            classifyIcon:'',
            isDisabled:'隐藏',
            level:record.level*1+1,
        }
        setDetail({ ...child,diatype:'添加' })
        setIsModalVisible(true);
    }
    const handleDisabled = (record) => {//修改商品上架状态
        console.log(record)
        let newDisabled=''
        if(record.isDisabled==='隐藏'){
            newDisabled='显示'
        }else{
            newDisabled='隐藏'
        }
        props.dispatch({
            type:'edmit_classify',
            payload:{
                isDisabled:newDisabled,
                id:record.id,
                code:record.code
            }
        })
        props.dispatch({
            type: 'get_classify'
        })
    }
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        onSelect: (record, selected, selectedRows) => {
          console.log(record, selected, selectedRows);
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows);
        },
      };
    const columns = [
        {
            title: '名称',
            dataIndex: 'title',
            key: 'title',
            align: 'center',
            render:(text,record)=><span>{record.title}</span>,
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            align: 'center',
        },
        {
            title: '分类图标',
            dataIndex: 'classifyIcon',
            key: 'classifyIcon',
            align: 'center',
            render: (classifyIcon) => <img src={classifyIcon} alt="" style={{ width: '60px', height: '40px' }} />,
        },
        {
            title: '分类等级',
            dataIndex: 'level',
            key: 'level',
            align: 'center',
            render: (level, record) => <span>{level===1?'一级目录':level===2?'二级目录'
            :level===3?'三级目录':'四级目录'}</span>
           
        },
        {
            title: '状态',
            dataIndex: 'isDisabled',
            key: 'isDisabled',
            align: 'center',
            render: (isDisabled, record) => <Switch size='small'
                checkedChildren={'显示'}
                unCheckedChildren={'隐藏'}
                defaultChecked={isDisabled === '显示'}
                onChange={() => handleDisabled(record)}
            />,
        },
        {
            title: '操作',
            key: 'opreat',
            align: 'center',
            width: 230,
            render: (text, record) => (
                <Space size="middle">
                    <Button type="link" size='small' onClick={() => handleEdmit(text, record)}>编辑</Button>
                    <Button type="link" size='small' onClick={() => handleAddChild(record)}>添加子目录</Button>
                    <Popconfirm
                        title="确定要删除这项吗?"
                        onConfirm={()=>delConfirm(text, record)}
                        onCancel={delCancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button type="link" size='small' 
                        >删除</Button>
                    </Popconfirm>
                    
                </Space>
            ),
        }
    ];
 
    // console.log(classifyList)
    return (
        <div className={style.goodsManage}>
            {/* 面包屑导航 */}
            <div className={style.head}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                        <i className='iconfont icon-gengduo-2'></i>
                        <a href="/layout">主页</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        商品
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        商品分类
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.main}>
                <section>
                    {/* 搜索 */}
                    <ShopSearch
                        SearchForm={SearchForm}
                        selectStatus={selectStatus}
                        handleSearch={handleSearch}
                    />
                    {/* 添加 */}
                    <Button type="primary" onClick={handleAddClassify} size='small' style={{marginBottom:'15px'}}>新增</Button>
                    <Table
                        columns={columns}
                        rowSelection={{ ...rowSelection, checkStrictly }}
                        dataSource={classifyList}
                        scroll={{ y: 350 }}
                        rowKey='id'
                    />
                    {/* <ShopTable curList={classifyList} columns={columns} /> */}
                </section>
            </div>
           
           {aa&& <DialogForm 
            detailInfo={detailInfo} 
            isModalVisible={isModalVisible} 
            cancel={getCancel}
            confirm={getConfirm}
            />}
        </div>
    );
}

export default connect((state) => {
    return {
        classifyList: state.classifyList,
        levelList:state.levelList
    }
})(Categories);
